<template>
  <div class="result">
    <div class="ops">
      <el-button size="small" @click="anno.undo">撤销</el-button>
      <el-button size="small" @click="anno.redo">前进</el-button>
    </div>
    <el-scrollbar height="calc(100vh - 100px)">
      <div v-for="a in anno.list" :key="a.id" class="item" @click="anno.focus(a.id)">
        <div class="head">
          <span class="swatch" :style="{ backgroundColor: labels.byId[a.label_id]?.color || '#ddd' }"></span>
          <span class="label">{{ labels.byId[a.label_id]?.name || '未知标签' }}</span>
          <span class="range">[{{a.start_offset}},{{a.end_offset}}]</span>
          <div class="actions" @click.stop>
            <el-tooltip content="编辑标签" placement="top">
              <el-button link size="small" :icon="Edit" @click="openEdit(a)"></el-button>
            </el-tooltip>
            <el-tooltip content="删除" placement="top">
              <el-button link size="small" type="danger" :icon="Delete" @click="confirmRemove(a.id)"></el-button>
            </el-tooltip>
          </div>
        </div>
        <div class="txt">{{ a.text }}</div>
      </div>
    </el-scrollbar>

    <!-- 编辑标注的标签选择弹窗 -->
    <el-dialog v-model="editDialog.visible" title="修改标注标签" width="420px">
      <div class="edit-body">
        <div class="preview-line">
          <span class="preview-label">原文本：</span>
          <span class="preview-text">{{ editDialog.target?.text }}</span>
        </div>
        <el-input v-model="labelFilter" placeholder="搜索标签" size="small" clearable class="mb8" />
        <div class="label-select-list">
          <div 
            v-for="l in filteredLabels" 
            :key="l.id" 
            class="label-option" 
            :class="{ active: l.id === editDialog.tmpLabelId }" 
            @click="editDialog.tmpLabelId = l.id"
          >
            <span class="color" :style="{ backgroundColor: l.color || '#ddd' }"></span>
            <span class="name">{{ l.name }}</span>
          </div>
        </div>
      </div>
      <template #footer>
        <el-button @click="editDialog.visible=false">取消</el-button>
        <el-button type="primary" :disabled="!editDialog.tmpLabelId" @click="applyEdit">保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue'
import { useAnnoStore, type Anno } from '../store/anno'
import { useLabelsStore } from '../store/labels'
import { ElMessageBox, ElMessage } from 'element-plus'
import { Edit, Delete } from '@element-plus/icons-vue'

const anno = useAnnoStore()
const labels = useLabelsStore()

function confirmRemove(id: string){
  ElMessageBox.confirm('确认删除该标注？', '提示', { type: 'warning' })
    .then(()=> { anno.remove(id); ElMessage.success('已删除') })
    .catch(()=>{})
}

// 编辑逻辑
const editDialog = ref<{ visible: boolean, target: Anno | null, tmpLabelId: string | null }>({
  visible: false,
  target: null,
  tmpLabelId: null
})

function openEdit(a: Anno){
  editDialog.value.visible = true
  editDialog.value.target = a
  editDialog.value.tmpLabelId = a.label_id
}

const labelFilter = ref('')
const filteredLabels = computed(()=>{
  const all = Object.values(labels.byId)
  if(!labelFilter.value) return all
  const q = labelFilter.value.toLowerCase()
  return all.filter(l=> (l.name||'').toLowerCase().includes(q))
})

function applyEdit(){
  const target = editDialog.value.target
  if(!target || !editDialog.value.tmpLabelId) return
  // 直接修改 store 中对象（为保持 undo/redo，也可走统一方法：重新 setList）
  const newList = anno.list.map(i=> i.id === target.id ? { ...i, label_id: editDialog.value.tmpLabelId as string } : i)
  // 使用 setList 以记录历史
  anno.setList(newList)
  editDialog.value.visible = false
  ElMessage.success('标签已更新')
}
</script>
<style scoped>
.result { padding: 8px; }
.item { padding: 6px 4px; border-bottom: 1px dashed #ddd; cursor: pointer; }
.head { display:flex; align-items:center; gap:6px; position: relative; }
.swatch { width:12px; height:12px; border-radius:3px; display:inline-block; border: 1px solid rgba(0,0,0,0.1); }
.label { font-weight: 600; }
.range { color:#999; font-size: 12px; margin-left: 4px; }
.txt { color: #666; white-space: pre-wrap; margin-left: 18px; }
.ops { display:flex; gap: 6px; margin-bottom: 8px; }
.actions { margin-left:auto; display:flex; gap:2px; opacity:0; transition: opacity .15s; }
.item:hover .actions { opacity:1; }

/* 编辑弹窗 */
.edit-body { max-height: 400px; overflow: hidden; display:flex; flex-direction: column; }
.preview-line { font-size:12px; color:#666; margin-bottom:6px; }
.preview-label { color:#999; }
.label-select-list { flex:1; overflow:auto; border:1px solid #eee; border-radius:4px; padding:4px; }
.label-option { display:flex; align-items:center; padding:4px 6px; border-radius:4px; cursor:pointer; gap:6px; font-size:13px; }
.label-option:hover { background:#f5f7fa; }
.label-option.active { background:#e6f3ff; border:1px solid #409eff; }
.label-option .color { width:14px; height:14px; border-radius:3px; border:1px solid rgba(0,0,0,0.1); }
.mb8 { margin-bottom:8px; }
</style>
